<template>
  <div>
    <el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
			<zh-space>
				<zh-card title="">
          <zh-form ref="queryFrom" :model="state.queryParam">
						<zh-form-input prop="funcCode" label="功能编号" placeholder="可输入功能编号查询" v-model="state.queryParam.funcCode"></zh-form-input>
						<zh-form-input prop="funcTitle" label="功能名称" placeholder="可模糊搜索查询" v-model="state.queryParam.funcTitle"></zh-form-input>
						<zh-form-query :form-ref="queryFrom" :table-ref="functionListTable" :showAdvanced="false"></zh-form-query>
					</zh-form>
				</zh-card>
        <zh-table ref="functionListTable" :rowConfig="{keyField:'funcId'}" title="已关联功能列表" :funcCode="state.funcCode" :columns="state.tableColumn">
          <template #status_default="{ row }"><zh-badge :status="statusMap[row.funcStatus].status" :text="statusMap[row.funcStatus].text" /></template>
        </zh-table>
      </zh-space>
		</el-scrollbar>
    <zh-dialog title="关联功能" width="80%" v-model="state.funcVisible" @confirm="saveFunc">
			<AddRouterFunctionModule ref="addRouterFunctionModuleRef" v-model="state.funcVisible" :routerId="state.queryParam.routerId"  />
		</zh-dialog>
  </div>
</template>
<script lang="ts" setup name="routerFunctionForm">
import AddRouterFunctionModule from './AddRouterFunctionModule.vue';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	routerId: {
		type: String,
	}
});
const { isTagsview } = storeToRefs($store.theme);
//------------------定义子组件---------------------------
const queryFrom = ref();
const functionListTable = ref();
const addRouterFunctionModuleRef = ref();
//------------------内部变量定义-------------------------
const state = reactive({
	queryParam: { routerId: '' },
  funcCode:'router0026',
  tableColumn:[
    { type: 'checkbox', width: 50, fixed: 'left' },
    {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号'},
    {field: 'funcId', title: '方法Id', fixed: 'left', visible: false, align: 'center', width: 150},
    {field: 'funcCode', title: '功能编号', align: 'center', fixed: 'left', width: 150},
    {field: 'funcTitle', title: '功能名称', align: 'center', fixed: 'left', width: 150},
    {field: 'funcTypeName', title: '功能类型', align: 'center',  width: 150},
    {field: 'apiTypeName', title: '接口类型', align: 'center',  width: 150},
    {
      field: 'funcStatus',
      title: '状态',
      align: 'center',
      editRender: {},
      slots: {
        // 使用插槽模板渲染
        default: 'status_default',
      },
      width: 120,
    },
    {field: 'funcDesc', title: '功能描述', align: 'center',  width: 300},
    {field: 'funcSourceTypeName', title: '功能来源类型', align: 'center',  width: 120},
    {field: 'serviceName', title: '服务名', align: 'center',  width: 200},
    {field: 'funcSourceName', title: '服务名称', align: 'center',  width: 120},
    {field: 'appName', title: '所属应用', align: 'center',  width: 200},
    {field: 'orgName', title: '建设单位', align: 'center',  width: 200},
    {field: 'devOrgName', title: '开发公司', align: 'center',  width: 200},
    {field: 'classPath', title: '类路径', align: 'center',  width: 200},
    {field: 'method', title: '请求方法', align: 'center',  width: 200},
    {field: 'api', title: '请求URL', align: 'center',  width: 200},
  ],
  funcVisible:false,
});
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
//------------------定义调用方法-------------------------
const onFuncQuery = () => {
  if(!props.routerId){
    return
  }
	functionListTable.value.query(state.queryParam);
};
//打开添加功能页面
function openFuncModule() {
  if (!props.routerId) {
		$messageBox.warning('请先选择需要关联的路由', '提示');
		return false;
	}
  state.funcVisible=true;
}
//关联功能
const saveFunc = () =>{
  if(!props.routerId){
    $messageBox.warning('请先选择需要关联的路由', '提示');
    return;
  }
  let funcIds= addRouterFunctionModuleRef.value.getCheckedFuncIds();
  if(!funcIds||funcIds.length<=0){
    return;
  }
  let params={routerId:props.routerId,funcIds:funcIds}
  $api.common.send
		.post('router0028', params)
		.then(() => {
			$messageBox.success('保存成功', '成功提示');
			state.funcVisible=false;
      onFuncQuery();
	}).catch(() => {});
}
//取消关联
const delFunc = () =>{
  if(!props.routerId){
    $messageBox.warning('请先选择需要删除关联的路由', '提示');
    return;
  }
  const funcS = functionListTable.value.getAllCheckboxRecords();
	if (funcS) {
		if (funcS.length <= 0) {
			$messageBox.warning('请先勾选需要删除关联的功能', '提示');
			return;
		}
	} else {
		$messageBox.warning('请先勾选需要删除关联的功能', '提示');
		return;
	}
	const funcIds: string[] = [];
	funcS.forEach((item) => {
		funcIds.push(item.funcId);
	});
  let params={routerId:props.routerId,funcIds:funcIds}
  $api.common.send
		.post('router0029', params)
		.then(() => {
			$messageBox.success('删除成功', '成功提示');
      onFuncQuery();
	}).catch(() => {});

}
//--------------------监听变动数据-----------------------------
watch(
	() => props.routerId,
	(id) => {
		if (id) {
			state.queryParam.routerId = id;
      onFuncQuery();
		}else{
      //清空表格
			functionListTable.value.setData([]);
    }
	}
);
//------------------初始化------------------------------
onMounted(()=>{})
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({
	onFuncQuery,
  openFuncModule,
  delFunc
});
</script>

<style lang="scss" scoped></style>
